﻿<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="">
	<meta name="author" content="OrcasThemes">
	<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
	<title>Home</title>
	<!-- Bootstrap core CSS -->
	<link href="css/bootstrap.css" rel="stylesheet">
	<!-- Custom styles for this template -->
	<link rel="stylesheet" href="css/screen.css">
	<link rel="stylesheet" href="css/animation.css">
	<!--[if IE 7]>

	<![endif]-->
	<link rel="stylesheet" href="css/font-awesome.css">
	<!--[if lt IE 8]>
	<link rel="stylesheet" href="css/ie.css" type="text/css" media="screen, projection">
	<![endif]-->
	<link href="css/lity.css" rel="stylesheet">
	<style>
		.form {
            width: 500px;
            background: #0006;
            padding: 50px;
			padding-top: 30px;
            margin-left: auto;
            margin-right: auto;
			text-align: center;
        }
		.form > input {
			margin-top: 20px;
		}
		.link {
			color: #383c93;
			text-decoration: none;
		}
	</style>
</head>
<body>
<div id="myapp" style="height: 100%;">
<!-- HOME 1 -->
<div id="home1" class="container-fluid standard-bg" style="height: 100%;">
 <!-- HEADER -->
 <div class="row header-top">
	<div class="col-lg-3 col-md-6 col-sm-5 col-xs-8">
	   <a class="main-logo" href="#"><img src="img/main-logo.png" class="main-logo img-responsive" alt="Muvee Reviews" title="Muvee Reviews"></a>
	</div>
	<div class="col-lg-6 hidden-md text-center hidden-sm hidden-xs">
	</div>
 </div>
 <!-- CORE -->
 <div class="row">
	<form class="form" @submit.prevent="register">
        <h2>注册页面</h2>
        <label for="username" class="sr-only">用户名</label>
        <input name="username" placeholder="用户名" required autofocus v-model="username">
        <label for="password" class="sr-only">密码</label>
        <input type="password" name="password" placeholder="密码" required v-model="password">
        <label for="password" class="sr-only">确认密码</label>
        <input type="password" name="password" placeholder="确认密码" required style="margin-bottom: 20px;" v-model="confirm">
        <button class="btn btn-lg btn-primary btn-block" type="submit">注册</button>
		<div v-if="errorMsg" style="margin-top: 10px;text-align: left; padding: 5px 10px;" class="alert alert-danger" role="alert">
			{{ errorMsg }}
		</div>
		<a href="/login.html" class="link">已有用户？立即登录</a>
    </form>
 </div>
</div>
</div>
</div>
</body>
<!-- JAVA SCRIPT -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.12.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/lity.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
 $(".nav .dropdown").hover(function() {
   $(this).find(".dropdown-toggle").dropdown("toggle");
 });
</script>
<script>
	let app = new Vue({
		el: '#myapp',
		mounted: function () {
			// 获取url参数 search 的值
			const urlSearchParams = new URLSearchParams(window.location.search);
			const params = Object.fromEntries(urlSearchParams.entries());
			this.errorMsg = params.error ? "用户名或密码错误" : "";
		},
		data: {
			username: "",
			password: "",
			confirm: "",
			errorMsg: ""
		},
		methods:{
			register: function (e) {
				if (this.password != this.confirm) {
					this.errorMsg = "输入的密码与确认密码不一致";
					return;
				}
				if (this.username.length < 3) {
					this.errorMsg = "用户名至少3个字符";
					return;
				}
				if (this.password.length < 6) {
					this.errorMsg = "密码至少6个字符";
					return;
				}
				$.ajax({
					url:"/register",
					type:"post",
               		data:JSON.stringify({ username: this.username, password: this.password }),
					context:this,
					success:function(result,status,xhr){
						if (result.reason) {
							this.errorMsg = result.reason;
						} else {
							alert("注册成功");
							window.location.href = "/login.html";
						}
					}
				});
			}
		}
	});
</script>
</html>
